<template>
  <div class="cms-views-container mypurchases-cms-pages">
    <header class="h-10 leading-10 px-4 text-center w-full">
      <span class="float-left">
        <LeftOutlined class="text-base" />
      </span>
      <span class="text-base text-[#333] font-medium">我的购买</span>
    </header>
    <div class="px-4 pt-4">
      <div v-for="item in purchasesList" :key="item.type" class="h-[146px] p-4 mb-4 rounded-lg item-purchases">
        <div class="mb-3">
          <img :src="item.svg" class="w-4 h-4" alt="" />
          <span class="pl-2 text-sm text-black font-medium">{{ item.type }}</span>
          <span
            class="float-right text-xs"
            :class="item.purchasesType === '支付成功' ? 'text-[#ff613f]' : 'text-[#666]'"
            >{{ item.purchasesType }}</span
          >
        </div>
        <div class="flex mb-4">
          <img :src="item.imgUrl" alt="" class="w-[45px] h-[45px] rounded" />
          <span class="pl-3">
            <h3 class="mb-0 text-sm text-black font-normal">{{ item.title }}</h3>
            <span class="text-[#999] text-xs">支付时间：{{ item.time }}</span>
          </span>
        </div>
        <p class="mb-0 text-right text-sm text-black"><span class="text-[#8f9299]">合计：</span>{{ item.total }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import mineIcons from '../assets/mine'

const purchasesList = [
  {
    type: 'VIP会员',
    svg: mineIcons.icon_vip,
    imgUrl: mineIcons.my_vip,
    title: '购买时长：1个月',
    time: '2022-04-23 14:28',
    total: '200 金币',
    purchasesType: '支付成功'
  },
  {
    type: '点播服务',
    svg: mineIcons.icon_player,
    imgUrl: mineIcons.icon_player,
    title: '狙击手',
    time: '2022-04-22 14:28',
    total: '120 金币',
    purchasesType: '支付成功'
  },
  {
    type: '章节订阅',
    svg: mineIcons.icon_novel,
    imgUrl: mineIcons.my_novel,
    title: '碧落天刀',
    time: '2022-04-21 14:28',
    total: '200 金币',
    purchasesType: '支付成功'
  },
  {
    type: '购买图集',
    svg: mineIcons.icon_atlas,
    imgUrl: mineIcons.my_atlas,
    title: '断片',
    time: '2022-04-23 14:28',
    total: '120 金币',
    purchasesType: '支付失败'
  }
]
</script>

<style scoped lang="less">
.mypurchases-cms-pages {
  .item-purchases {
    box-shadow: 1px 1px 20px 0 rgba(85, 85, 85, 0.09);
  }
}
</style>
